<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>智能口罩</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }

    .navbar {
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: center;
      background-color: #007bff;
      color: #fff;
      height: 60px;
      padding: 0 20px;
    }

    h2 {
      margin: 0;
      font-size: 24px;
      font-weight: bold;
    }

    a {
      color: #fff;
      text-decoration: none;
      font-weight: bold;
    }
    
    .logout-link {
      float: right;
    }

    .container {
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
    }

    .container h3 {
      font-size: 20px;
      font-weight: bold;
      margin-top: 40px;
      margin-bottom: 20px;
    }

    p {
      margin: 0;
      font-size: 48px;
      font-weight: bold;
      color: #007bff;
      display: inline-block;
    }

    span {
      font-size: 24px;
      font-weight: bold;
    }

    button {
      background-color: #007bff;
      color: #fff;
      border: none;
      padding: 10px 20px;
      font-size: 16px;
      font-weight: bold;
      cursor: pointer;
      transition: all 0.2s ease-in-out;
    }

    button:hover {
      background-color: #0062cc;
    }

    .logout-link {
        float: right;
}


    .company-name {
      text-align: center;
      margin-top: 40px;
      font-size: 20px;
      font-weight: bold;
      color: #444;
    }
  </style>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <div class="navbar">
    <h2>智能口罩</h2>
    <span>
        <a href="#" class="logout-link">退出登录</a>
      </span>
  </div>

  <div class="container">
    <div class="temperature">
      <h3>当前温度：</h3>
      <p id="temperature">--</p><span>℃</span>
    </div>
    <div class="humidity">
      <h3>当前湿度：</h3>
      <p id="humidity">--</p><span>%</span>
    </div>
    <button id="connectBtn">连接蓝牙</button>
    <div class="chart-container">
      <canvas id="myChart"></canvas>
    </div>
  </div>

  <div class="company-name">德阳市罗江区智云优创新科技有限公司</div>

  <script>
    const connectBtn = document.getElementById('connectBtn');
    const temperatureEl = document.getElementById('temperature');
    const humidityEl = document.getElementById('humidity');
    const ctx = document.getElementById('myChart').getContext('2d');

    let chart;

    function updateTemperatureAndHumidity() {
      const temperature = Math.floor(Math.random() * 10) + 20;
      const humidity = Math.floor(Math.random() * 30) + 50;
      temperatureEl.textContent = temperature;
      humidityEl.textContent = humidity;

      // 更新图表数据
      chart.data.labels.push(new Date().toLocaleTimeString());
      chart.data.datasets[0].data.push(temperature);
      chart.data.datasets[1].data.push(humidity);
      chart.update();
    }

    setInterval(updateTemperatureAndHumidity, 1000);

    // 初始化图表
    chart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: [],
        datasets: [{
          data: [],
          label: '温度 (℃)',
          borderColor: '#007bff',
          fill: false
        }, {
          data: [],
          label: '湿度 (%)',
          borderColor: '#28a745',
          fill: false
        }]
      },
      options: {
        responsive: true,
        title: {
          display: true,
          text: '实时温度湿度图表'
        },
        scales: {
          xAxes: [{
            type: 'time',
            display: true,
            scaleLabel: {
              display: true,
              labelString: '时间'
            }
          }],
          yAxes: [{
            display: true,
            scaleLabel: {
              display: true,
              labelString: '数值'
            }
          }]
        }
      }
    });
  </script>
</body>
</html>
